<template>
  <div>
    <h1>提现申请</h1>
    <div class="header" style="margin-bottom: 20px">
      <a-button type="primary" icon="search" @click="refresh(-1)"
        >查看全部提现记录</a-button
      >
      <a-button
        type="primary"
        icon="search"
        @click="refresh(0)"
        style="margin-left: 20px"
        >查看未审核</a-button
      >
      <a-button
        type="primary"
        icon="search"
        @click="refresh(1)"
        style="margin-left: 20px"
        >查看审核通过</a-button
      >
      <a-button
        type="primary"
        icon="search"
        @click="refresh(2)"
        style="margin-left: 20px"
        >查看审核拒绝</a-button
      >
    </div>
    <a-table
      :columns="columns"
      :data-source="rows"
      :scroll="{ x: 1500, y: 300 }"
      :rowKey="(record) => record.id"
    >
      <span slot="state" slot-scope="record">
        <span v-if="record == 0">未审核</span>
        <span v-if="record == 1">审核通过</span>
        <span v-if="record == 2">审核拒绝</span>
      </span>

      <span slot="pay" slot-scope="record">
        <span v-if="record == 0">银行卡</span>
        <span v-if="record == 1">支付宝</span>
      </span>
      <a-space
        size="8"
        slot="action"
        slot-scope="text, record"
        style="display: flex; justify-content: space-between"
      >
        <a-button type="danger" slot="action" @click="refuse(record)">
          拒绝
        </a-button>
        <a-button type="primary" slot="action" @click="agree(record)">
          同意
        </a-button>
      </a-space>
      <a slot="action">action</a>
    </a-table>

    <!-- 弹出框 -->
    <div class="popup" v-show="agree_popup">
      <p class="title">是否同意？</p>
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          <a-icon type="exclamation" />
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="agree_confirm()">
          <a-icon type="check" />
          确定
        </a-button>
      </div>
    </div>

    <div class="popup" v-show="refuse_popup">
      <a-input placeholder="拒绝原因" class="meau" v-model="meau" />
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="refuse_confirm()">
          确定
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "用户ID",
    width: 100,
    dataIndex: "user_id",
    key: "user_id",
    fixed: "left",
  },
  {
    title: "姓名",
    width: 100,
    dataIndex: "user_name",
    key: "user_name",
    fixed: "left",
  },
  {
    title: "提现金额",
    dataIndex: "withdrawal_amount",
    key: "withdrawal_amount",
    width: 150,
  },
  {
    title: "支付账号",
    dataIndex: "payment_account",
    key: "payment_account",
    width: 150,
  },
  {
    title: "支付时间",
    dataIndex: "creation_date",
    key: "creation_date",
    width: 150,
  },
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: 150,
  },
  {
    title: "用户电话",
    dataIndex: "phone",
    key: "phone",
    width: 150,
  },
  {
    title: "支付方式",
    dataIndex: "payment_method",
    key: "payment_method",
    scopedSlots: {
      customRender: "pay",
    },
    width: 150,
  },
  {
    title: "支付状态",
    dataIndex: "approval_status",
    key: "approval_status",
    scopedSlots: {
      customRender: "state",
    },
    width: 150,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    fixed: "right",
    width: 180,
    scopedSlots: {
      customRender: "action",
    },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
import { mapState, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("record");
export default {
  data() {
    return {
      data,
      columns,
      refuse_popup: false,
      agree_popup: false,
      meau: "",
      info: {},
    };
  },

  created() {
    this.getList();
  },
  computed: {
    ...mapState({
      rows: (state) => state.record.rows,
      total: (state) => state.record.total,
    }),
  },
  methods: {
    ...mapActions(["withdrawal_agree", "recharge_refuse"]),
    getList() {
      this.$store.dispatch("record/withdrawal");
    },
    agree(item) {
      this.agree_popup = !this.agree_popup;
      this.info = item;
    },
    refuse(item) {
      this.refuse_popup = !this.refuse_popup;
      this.info = item;
    },
    cancel() {
      this.agree_popup = false;
      this.refuse_popup = false;
    },
    button(item) {
      if (item.approval_status == 0) {
        return true;
      } else {
        return false;
      }
    },

    async refuse_confirm() {
      let result = {
        id: this.info.id,
        approvalStatus: 2,
        rejectNote: this.meau,
      };
      this.refuse_popup = !this.refuse_popup;
      this.$store.commit("record/modify", result);
      const success = await this.recharge_refuse();
      if (success) {
        this.$message.success("成功");
        this.getList();
      } else {
        this.$message.error("失败");
      }
    },
    async agree_confirm() {
      let result = {
        id: this.info.id,
        approvalStatus: 1,
        rejectNote: this.meau,
      };
      this.agree_popup = !this.agree_popup;
      this.$store.commit("record/modify", result);
      const success = await this.withdrawal_agree();
      if (success) {
        this.$message.success("成功");
        this.getList();
      } else {
        this.$message.error("失败");
      }
    },
    refresh(index) {
      this.$store.commit("record/changeState", index);
      this.getList();
    },
  },
};
</script>

<style>
h1 {
  color: blue;
}

.popup {
  border-radius: 15px;
  background-clip: padding-box;
  width: 300px;
  height: 150px;
  padding: 15px 35px 15px 35px;
  background: #fefefe;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title {
  text-align: center;
  margin-top: 20px;
}

.meau {
  margin: 20px 0;
}
</style>
